<template>
  <div>
    <el-dialog
        :visible.sync="dialogVisible"
        width="25%"
        class="custom_dialog"
        center
        @close="close"
        @open="getCode"
        :close-on-click-modal="false"
    >
      <el-tabs :stretch="true" v-model="activeName">
        <el-tab-pane label="登录" name="login">
              <div class="login">
                <h2 class="login-title">
                  {{title}}
                </h2>
                <el-form
                    ref="form"
                    :rules="loginRule"
                    :model="loginForm"
                    label-width="80px"
                    :hide-required-asterisk="true"
                >
                  <el-form-item label="账号" prop="username">
                    <el-input v-model="loginForm.username" clearable/>
                  </el-form-item>
                  <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="loginForm.password" show-password clearable/>
                  </el-form-item>
                  <el-form-item label="验证码" prop="code">
                    <el-input
                        v-model="loginForm.code"
                        auto-complete="off"
                        placeholder="验证码"
                        style="width: 63%"
                        @keyup.enter.native="submit"
                    >
                      <!--              <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />-->
                    </el-input>
                    <div class="login-code">
                      <img :src="codeUrl" @click="getCode" class="login-code-img"/>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
        </el-tab-pane>
        <el-tab-pane label="注册" name="register">
          <div class="login">
            <h2 class="login-title">
              账号注册
            </h2>
            <el-form
                ref="registerForm"
                :rules="registerRule"
                :model="registerForm"
                label-width="80px"
                :hide-required-asterisk="true"
            >
              <el-form-item label="部门" prop="deptId">
                <treeselect v-model="registerForm.deptId" :options="deptList" :normalizer="normalizer" placeholder="选择部门" />
              </el-form-item>
              <el-form-item label="姓名" prop="name">
                <el-input v-model="registerForm.name" clearable/>
              </el-form-item>
              <el-form-item label="账号" prop="username">
                <el-input v-model="registerForm.username" clearable/>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="registerForm.password" show-password clearable/>
              </el-form-item>
              <el-form-item label="手机号" prop="phoneNumber">
                <el-input v-model="registerForm.phoneNumber" clearable/>
              </el-form-item>
              <el-form-item label="验证码" prop="code">
                <el-input
                    v-model="registerForm.code"
                    auto-complete="off"
                    placeholder="验证码"
                    style="width: 63%"
                    @keyup.enter.native="submit"
                >
                  <!--              <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />-->
                </el-input>
                <div class="login-code">
                  <img :src="codeUrl" @click="getCode" class="login-code-img"/>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">{{activeName == 'login'?'登 录':'注册'}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {register} from "@/api/user";
import {getCodeImg} from "@/api/user";
import {getDeptList} from "@/api/dept";
// import svgIcon from "@/components/SvgIcon";
export default {
  name: "index",
  components:{Treeselect},
  watch:{
    $route: {
      handler: function(route) {
        this.redirect = route.path
      },
      immediate: true
    },
    uuid:{
      handler:function (newV) {
        this.loginForm.uuid = newV
        this.registerForm.uuid = newV
      },
      immediate:true
    }
  },
  data() {
    return {
      deptList:[],
      activeName:'login',
      codeUrl: "",
      uuid:'',
      dialogVisible:false,
      loginForm:{},
      registerForm:{},
      title:'账号登录',
      loginRule:{
        username:[
          {required:true,message:'账号不能为空',trigger:'blur'}
        ],
        password:[
          {required:true,message:'密码不能为空',trigger:'blur'}
        ],
        code: [{ required: true, trigger: "blur", message: "请输入验证码" }]
      },
      registerRule:{
        deptId: [
          {required:true,message:'请选择部门',trigger:'blur'}
        ],
        username:[
          {required:true,message:'账号不能为空',trigger:'blur'}
        ],
        password:[
          {required:true,message:'密码不能为空',trigger:'blur'}
        ],
        code: [{ required: true, trigger: "blur", message: "请输入验证码" }],
        name:[{required: true, trigger: "blur", message: "姓名不能为空"}],
        phoneNumber: [
            {required: true, trigger: "blur", message: "电话号码不能为空"},
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur"
            }
          ]
      },
      redirect: undefined
    }
  },
  created() {
    this.getDeptList()
  },
  methods:{
    reset() {
      this.loginForm = {
        username:undefined,
        password:undefined,
        code:'',
        uuid: ""
      }
      this.registerForm = {
        code: "",
        deptId: undefined,
        name: "",
        password: "",
        phoneNumber: "",
        username: "",
        uuid: ""
      }
    },
    close() {
      this.reset()
      this.activeName = 'login'
      this.$refs.form.resetFields()
      this.$refs.registerForm.resetFields()
    },
    // 获取部门信息
    getDeptList() {
      getDeptList().then(res => {
        this.deptList = this.handleTree(res.data,'deptId')
      })
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      };
    },
    submit() {
      if (this.activeName == 'login') {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$store.dispatch('login',this.loginForm).then(() => {
              this.$store.dispatch('getInfo')
              this.$router.push({path:this.redirect || '/'})
              this.$modal.notifySuccess('登录成功')
              this.dialogVisible = false
            }).catch((err) => {
              console.log(err)
            })
          }
        })
      }else {
        this.$refs.registerForm.validate((vaild) => {
          if (vaild) {
            register(this.registerForm).then(res => {
              if (res.code === 200) {
                this.$modal.notifySuccess('注册成功，请登录')
                this.activeName = 'login'
              }
            })
          }
        })
      }
    },
    getCode() {
      getCodeImg().then(res => {
        this.codeUrl = "data:image/gif;base64," + res.data.img;
        this.uuid = res.data.uuid;
      })
    },
  }
}
</script>

<style>
.login-title {
  text-align: center;
}

.custom_dialog  .el-dialog__header{
  padding: 10px !important;
}
.custom_dialog .el-dialog {
  border-radius: 15px;
}
.custom_dialog .el-dialog__body {
  padding-bottom: 0 !important;
}
.login-code {
  width: 33%;
  height: 38px;
  float: right;
}
.login-code img{
  cursor: pointer;
  vertical-align: middle;
}
.login-code-img {
  height: 38px;
}
.custom_dialog .el-form-item__content {
  line-height: 0 !important;
}
</style>
